<template>
  <div class="myWrap">
    <div class="header" @click="toUserDetail">
      <div class="picWrap">
        <div class="pic">
          <img :src="picSrc" alt="" v-if="picSrc" />
          <img src="static/images/headPic.png" alt="" v-else />
        </div>
        <div class="words">
          <p class="username">{{ username }}</p>
          <br />
          <p class="college">{{ college }}</p>
        </div>
      </div>
      <div class="more">
        <van-icon size="0.2rem" name="arrow" class="arrow" />
      </div>
    </div>
    <div class="headerNext">
      <div class="post" @click="myHost">帖子</div>
      <div class="comment" @click="myCommentHost">评论</div>
    </div>
    <div class="division"></div>
    <div class="contentWrap">
      <van-button type="default" size="large" class="like" @click="myLikeHost"
        >我的点赞</van-button
      >
      <van-button
        type="default"
        size="large"
        class="collection"
        @click="myStarHost"
        >我的收藏</van-button
      >
      <van-button
        type="default"
        size="large"
        class="password"
        @click="changePassword"
        >修改账号密码</van-button
      >
      <van-button
        type="default"
        size="large"
        class="userInfo"
        @click="changeUsrtInfo"
        >修改个人信息</van-button
      >
    </div>
    <div class="division"></div>
    <div class="button">
      <van-button type="default" size="large" @click="changeAccount"
        >切换账号</van-button
      >
      <van-button type="danger" size="large" class="logout" @click="logout"
        >退出登录</van-button
      >
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  components: {},
  data() {
    return {
      picSrc: "",
      user: "",
      username: "",
      college: "",
    };
  },
  computed: {},
  created() {
    this.user = JSON.parse(sessionStorage.getItem("user"));
    if (this.user[0].headPic) {
      this.picSrc = this.user[0].headPic.content;
    }
    if (this.user[0]) {
      this.username = this.user[0].username;
      this.college = this.user[0].college;
    }
  },
  methods: {
    toUserDetail() {
      this.$router.push({
        name: "UserDetail",
        query: { id: this.user[0]._id },
      });
    },
    changeUsrtInfo() {
      this.$router.push({
        name: "ChangeUserInfo",
        query: { userName: this.user[0].username },
      });
    },
    changePassword() {
      this.$router.push({
        name: "SafetyProblem",
      });
    },
    // 跳转到我的帖子页
    myHost() {
      this.$router.push({
        name: "myHost",
      });
    },
    // 跳转到我的收藏页
    myStarHost() {
      this.$router.push({
        name: "myStarHost",
      });
    },
    // 跳转到我的点赞页
    myLikeHost() {
      this.$router.push({
        name: "myLikeHost",
      });
    },
    // 跳转到我的评论页
    myCommentHost() {
      this.$router.push({
        name: "myCommentHost",
      });
    },
    logout() {
      Dialog.confirm({
        message: "您确定要退出登录吗？",
      })
        .then(() => {
          // 清楚本地信息
          this.$store.commit("LOGOUT");
          this.$router.replace({ path: "/login" });
        })
        .catch(() => {
          // on cancel
        });
    },
    changeAccount() {
      this.$router.replace({ path: "/login" });
    },
  },
};
</script>
<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-content: center;
  padding: 5px 0;
  border-bottom: 1px solid #e0e0e0;
}
.picWrap {
  display: flex;
  align-content: center;
}
.pic {
  text-align: left;
  margin-left: 16px;
}
.pic > img {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
}
.words {
  margin-left: 0.05rem;
  text-align: left;
}
.username {
  font-weight: 600;
  margin-top: 0.1rem;
}
.more {
  margin: 0 auto;
  margin-right: 16px;
  text-align: center;
}
.arrow {
  margin-top: 0.2rem;
}
.headerNext {
  margin: 10px 0;
  display: flex;
  justify-content: space-around;
}
.division {
  height: 15px;
  background-color: #f0f0f0;
}
.contentWrap > button {
  margin: 5px 0;
}
.contentWrap {
  margin: 0 16px;
}
.button {
  margin: 10px 16px;
}
.logout {
  margin-top: 10px;
}
</style>
